<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			//修改h1
			//DOM的方式 放在head中无法正确执行 因为执行时html文件还未加载完
			// var h = document.getElementsByTagName("h1");
			// h[0].innerText="改变";
			// console.log(h[0]); //undefined
			//问题：未加载
			//解决：写在h1加载后，或使用文档就绪函数（导入jquery）

			/* JQUery 函数必须位于文档就绪函数中 */
			//$(选择器).事务处理
			$(document).ready(function() {
				function getColor() {
					/* floor向下取整 random返回0-1的随机数 */
					return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
				}
				$("button").mouseenter(function() {
					var h = $("h1");
					for (var i = 0; i < h.length; i++) {
						h[i].style.color = getColor();
						h[i].innerText += "变";
					}
				})

				$("button").mouseleave(function() {
					var h = $("h1");
					for (var i = 0; i < h.length; i++) {
						// $("h1").css("color:"+getColor()+";");
						h[i].innerText = h[i].innerText.substring(0, h[i].innerText.lastIndexOf("变"));
					}
				})
			})


			/* 省略写法，省略了(document).ready */
			$(function() {




			})
		</script>
		<title>TEST_JQUERY 测试文档就绪函数 </title>
	</head>
	<body>
		<h1>修改前的h1</h1>
		<h1>修改前的h1</h1>
		<h1>修改前的h1</h1>
		<h1>修改前的h1</h1>
		<h1>修改前的h1</h1>

		<button>button</button>
	</body>
</html>
